<template>
  <div class="container">
    <Modal v-model="showCpmodel" width="350">
      <template #header>
        <p style="color:black;text-align:left">
          <!-- <Icon type="ios-information-circle"></Icon> -->
          <span>活動優惠碼</span>
        </p>
      </template>
      <template>
        <Scroll :on-reach-bottom="handleReachBottom">
          <Card v-for="(item, index) in autoCoupList" :key="index" dis-hover style="margin: 10px 15px">
            <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">HK$<span
                class="price">{{ item.price | unitPrice }}</span></span>
            <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span
                class="price">{{ item.discount }}</span>折</span>
            <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{ item.consumeThreshold }}元可用</span>
            <p style="font-size: 10px;">使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
            <p style="font-size: 10px;">有效期：{{ item.endTime }}</p>
          </Card>
        </Scroll>
      </template>
      <template #footer>
        <Button type="error" @click="showCpmodel=false">确定</Button>
      </template>
    </Modal>

    <!-- 固定頭部 -->
    <hover-search :class="{show: topSearchShow}" class="hover-search"></hover-search>

    <!-- 頭部 包括登錄，我的訂單等 -->
    <BaseHeader></BaseHeader>
    <!-- 搜索框、logo -->
    <Search></Search>

    <template>
      <el-carousel v-if="carouselList.length > 0" :interval="5000" arrow="always" height="1500px" style="margin-top: 15px">
        <el-carousel-item v-for="item in carouselList" :key="item.id">
          <el-image :src="item.url" fit="cover" style="width: 100%;height: 1500px"></el-image>
        </el-carousel-item>
      </el-carousel>
    </template>

    <!-- 商品分類 -->
    <cateNav v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity" :showAlways="true"></cateNav>
    <!-- 楼层装修部分 -->
    <model-form ref="modelForm" :data="modelForm"></model-form>
    <!-- 侧边栏 -->
    <fixedBar :class="{'show-fixed': topSearchShow}" class="fixed-bar"></fixedBar>
    <Footer/>
  </div>
</template>

<script>
import Search from '@/components/Search.vue';
import ModelForm from '@/components/indexDecorate/ModelForm.vue';
import HoverSearch from '@/components/header/hoverSearch.vue';
import fixedBar from '@/components/fixed/index.vue';
import storage from "@/plugins/storage";
import {getAutoCoup, indexData, handleCarousel, handleFindFoot} from '@/api';
import {seckillByDay} from '@/api/promotion'
import {findStoreByHost,findOssFile} from "@/api/common";
import {SET_LOGOIMG} from "@/vuex/mutations";
import Footer from "../components/footer/Footer";

export default {
  name: 'Index',
  mounted() {
    // 通过域名获取店铺ID
    findStoreByHost(window.location.hostname).then(res => {
      window.localStorage.setItem("storeId", res.result);
      this.$store.commit("SET_LOGOIMG", require('@/assets/images/logo' + window.localStorage.getItem("storeId") + '.png'));
      this.getIndexData();
      let that = this;
      window.onscroll = function () {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        if (top > 300) {
          that.topSearchShow = true;
        } else {
          that.topSearchShow = false;
        }
      };
      if (storage.getItem('userInfo')) {
        this.getAutoCoup()
      }
      this.getCarousel();
    })
  },
  data() {
    return {
      carouselList: [],
      autoCoupList: [],
      showCpmodel: false,
      modelForm: {list: []}, // 楼层装修數据
      topAdvert: {}, // 顶部广告
      showNav: false, // 是否展示分類栏
      topSearchShow: false, // 滚動後顶部搜索栏展示
      carouselLarge: false, // 不同轮播分類尺寸
      carouselOpacity: false // 不同轮播分類样式
    };
  },
  created(){
  },
  methods: {
    // 優惠碼可用范围
    useScope(type, storeName) {
      let shop = '平台';
      let goods = '全部商品'
      if (storeName !== 'platform') shop = storeName
      switch (type) {
        case 'ALL':
          goods = '全部商品'
          break;
        case 'PORTION_GOODS':
          goods = '部分商品'
          break;
        case 'PORTION_GOODS_CATEGORY':
          goods = '部分分類商品'
          break;
      }
      return `${shop}${goods}可用`
    },
    getCarousel(){
      handleCarousel().then(res => {
        if (res.result) {
          this.carouselList = res.result;
        }
      })
    },
    getAutoCoup() {
      let data = new Date()
      let datas = data.getDate()
      let hours = data.getHours()
      let flagCoup = storage.getItem('getTimes') //缓存
      if (flagCoup && flagCoup != undefined && flagCoup != null) {  //判断当前是否有缓存
        if (Number(datas) > Number(flagCoup)) { //判断缓存是否小於当前天數
          if (Number(hours) >= 6) {//超过或等於6時清楚缓存
            storage.setItem('getTimes', datas)//存储缓存
            this.getcps()
          }
        }
      } else {
        // window.localStorage.setItem('getTimes',datas)//存储缓存
        this.getcps()
      }
    },
    getcps() {
      console.log(123123)
      let data = new Date()
      let datas = data.getDate()
      getAutoCoup().then(res => { //调用自動發券
        if (res.success) {
          this.autoCoupList.push(...res.result);
          let objs = {};
          this.autoCoupList = this.autoCoupList.reduce((cur, next) => {
            //对象去重
            if (next.id != undefined) {
              objs[next.id]
                  ? ""
                  : (objs[next.id] = true && cur.push(next));
            }
            return cur;
          }, []);
          if (this.autoCoupList != '' && this.autoCoupList.length > 0) {
            console.log(1231232132)
            this.showCpmodel = true;
          }
          storage.setItem('getTimes', datas)//存储缓存
        }
      })
    },
    getIndexData() {
      // 获取首頁装修數据
      //获取店铺id
      let num = window.localStorage.getItem('storeId');
      indexData(num).then(async (res) => {
        if (res.success && null !== res.result) {
          let dataJson = JSON.parse(res.result.pageData);
          // 秒殺活動不是装修的數据，需要调用接口判断是否有秒殺商品
          // 轮播图根据不同轮播，样式不同
          for (let i = 0; i < dataJson.list.length; i++) {
            let type = dataJson.list[i].type
            if (type === 'carousel2') {
              this.carouselLarge = true;
            } else if (type === 'carousel1') {
              this.carouselLarge = true
              this.carouselOpacity = true
            } else if (type === 'seckill') {
              let seckill = await this.getListByDay()
              dataJson.list[i].options.list = seckill
            }
          }
          this.modelForm = dataJson;
          storage.setItem('navList', dataJson.list[1])
          this.showNav = true
          this.topAdvert = dataJson.list[0];
        }
      });
    },
    async getListByDay() { // 当天秒殺活動
      const res = await seckillByDay()
      if (res.success && res.result.length) {
        return res.result
      } else {
        return []
      }
    },
    handleReachBottom() {

    },
  },
  components: {
    Search,
    ModelForm,
    HoverSearch,
    fixedBar,
    Footer
  }
};
</script>

<style lang="scss" scoped>
@import '../assets/styles/coupon';

.container {
  @include sub_background_color($light_background_color);
}
</style>
<style>
.hover-search {
  width: 100%;
  height: 60px;
  transform: translateY(-200px);
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 9999;
  box-shadow: 0 0 10px 2px rgb(90 90 90 / 60%);
  transition: 0.35s;
}

.show {
  transform: translateY(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  top: 0;
}

.fixed-bar {
  opacity: 0 !important;
  transform: translateY(-10px);
  transition: .35s;
  z-index: 999999;
  height: 0px !important;
  overflow: hidden;
}

.show-fixed {
  height: 354px !important;
  opacity: 1 !important;
  transform: translateY(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}


/* 2K */
@media screen and (min-width: 2561px) and (max-width: 3840px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 900px;
    top: 500px;
  }
}

/* 1080p */
@media screen and (max-width: 2560px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 300px;
    top: 500px;
  }
}


@media screen and (max-width: 2025px) {
  /* 样式 */
  .fixed-bar {
    position: fixed;
    right: 150px;
    top: 300px;
  }
}

</style>
